<template>
    <div>
        <el-page-header @back="$router.push({ name: '比赛管理' })" :content="data.name"></el-page-header>
        <div class="row">
            <div class="col">
                <el-button @click="excel()">导出Excel</el-button>
            </div>
        </div>
        <el-table :data="useractivity" height="65vh" style="width: 100%">
            <el-table-column prop="activityname" label="比赛名"></el-table-column>
            <el-table-column prop="userid" label="用户ID"></el-table-column>
            <el-table-column prop="name" label="用户名"></el-table-column>
            <el-table-column prop="updatedAt" :formatter="({ createdAt }) => toLocaleDateString(createdAt)"
                label="报名时间"></el-table-column>
            <el-table-column prop="updatedAt" label="删除">
                <template #default="scope">

                    <el-button type="danger" @click="del(scope.row.ID)" size="default">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" :page-size="Number(formdata._limit)"
            layout="prev, pager, next" :total="count"></el-pagination>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive } from 'vue';
import { asyncdelactivityuser, asyncselectactivityuser, Iobj } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { getExceltodownload } from '../../../util/excel';
import { TimeYH, toLocaleDateString } from '../../../util/time';


const p = defineProps<{ data: Studycodemodel.Iactivity }>()

const useractivity = ref<Studycodemodel.Iactivityuser[]>([])

const count = ref(0)

function handleCurrentChange(val: number) {
    formdata._offset = Number(formdata._limit) * (val - 1);
}

const formdata = reactive<Iobj<Studycodemodel.Iactivityuser>>({
    _limit: 20,
    _offset: 0
})

async function start() {
    const data = await asyncselectactivityuser(formdata)
    useractivity.value = data.rows
    count.value = data.count

}

function excel() {
    const act: (string | number | undefined)[][] = [
        ["用户id", "用户名称", "比赛名称", "报名时间", "qq", "微信opendid"],
    ];
    let __activityname;
    const _act = useractivity.value.map((v) => {
        const { userid, createdAt = "", user } = v;
        let qq, openid;
        if (user) {
            qq = user.qq;
            openid = user.openid;
        }
        __activityname = p.data.name;
        return [
            userid,
            v.user?.name,
            p.data.name,
            toLocaleDateString(createdAt),
            qq,
            openid,
        ];
    });

    getExceltodownload(act.concat(_act), `${__activityname}比赛成绩表`);

}
function del(ID: number) {
    try {
        ElMessageBox.confirm("取消此用户报名, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(async () => {
                await asyncdelactivityuser({ ID });
                ElMessage({
                    type: "success",
                    message: "删除成功!",
                });
                start();
            })
            .catch(() => {
                ElMessage({
                    type: "info",
                    message: "已取消删除",
                });
            });
    } catch (e: any) {
        ElMessage({
            message: "删除失败" + e,
            type: "error",
        });
    }
}

</script>